<template>
  <div class="container">
    <div class="left-img">
      <div >
        <el-tabs class="left-img-border" style="height: 550px" >
          <el-tab-pane label="User">
            <template #label>
              <div v-if="Data" style="width: 120px; height: 120px;">
                <!-- 这个是小图标1 -->
                <img
                    :src="Data.url1"
                    style="width: 100%"
                />
              </div>
            </template>
            <!-- 这个是大图标 -->
            <div v-if="Data">
              <img
                :src="Data.url"
                style="width: 100%;height: 380px;"
            />
            </div>
            
          </el-tab-pane>
          <el-tab-pane label="Config" v-if="Data">
            <template #label >
              <div v-if="Data" style="width: 120px; height: 120px;">
                <img 
                    :src="Data.url2"
                    style="width: 100%"
                />
              </div>
            </template>
            <img
                :src="Data.url2"
                style="width: 100%"
            />
          </el-tab-pane>
          <el-tab-pane label="Role" v-if="Data">
            <template #label>
              <div v-if="Data" style="width: 120px; height: 120px;">
                <img
                    :src="Data.url3"
                    style="width: 100%"
                />
              </div>
            </template>
            <img
                :src="Data.url3"
                style="width: 100%"
            />
          </el-tab-pane>
          <el-tab-pane label="Task" v-if="Data">
            <template #label>
              <div style="width: 120px; height: 120px;">
                <img
                    :src="Data.url4"
                    style="width: 100%"
                />
              </div>
            </template>
            <img
                :src="Data.url4"
                style="width: 100%"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="right-text" v-if="Data">
      <div class="goods-title">{{Data.title}}</div>
      <div class="goods-detal" style="margin-bottom: 26px;">{{Data.detal}}</div>
      <div class="goods-card" style="background-color:#00b000;">
        <div class="card-con">门店价格：{{Data.price}}￥</div>
        <div class="card-con">累计销量：5000</div>
        <div class="card-con">加购次数：0</div>
      </div>
      <div>
        <el-form-item class="address-sel" label="选择自提点:">
          <el-select  v-model="form.region" placeholder="请选择 " >
            <el-option label="永辉超市" value="shanghai" />
            <el-option label="京东便利店" value="beijing" />
          </el-select>
        </el-form-item>
      </div>
      <div>购买数量：
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
      </div>
      <div class="btns3">
        <el-button :icon="Check" type="primary">加入购物车</el-button>
        <el-button :icon="Star" type="warning" >收藏该商品</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref ,reactive,onMounted } from 'vue'
import {Star,Check} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const form=reactive({
  region:''
})
const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}

const route = useRoute() // 获取路由对象
let Data = ref(null); // 使用 ref 来定义 Data
onMounted(() => {
  const dataString = route.query.item;

  try {
    // 尝试解析字符串为对象
    Data.value = JSON.parse(dataString);
  } catch (e) {
    // 如果解析失败，打印错误并设置Data为null或默认值
    console.error('解析查询参数失败:', e);
    Data = null;
  }
})


</script>


<style lang="scss" scoped>
.container{
  display: flex;
  height: 100vh;
  .left-img{
    display: flex;

    margin: 30px auto;
    .left-img-border{
      border: 5px solid rgba(190, 226, 131, 0.877);
      padding: 16px 16px 0 16px;
      width: 450px;
    }
    .el-tabs--top{
      flex-direction: column;
    }
    .el-tabs{
      --el-tabs-header-height:100px;
      --el-font-size-base:26px;
    }
    .el-tabs__nav-prev,.el-tabs__nav-next{
      left: -6px;
      font-size: 25px;
      line-height: 106px;
    }
  }
  .right-text{
    display: flex;
    width: 60%;
    flex-direction: column;
    .goods-title{
      margin: 28px 0 10px 0;
      font-size: 28px;
      color:forestgreen;
    }
    .goods-detal{
      font-size: 18px;
      color:forestgreen;
    }
    .goods-card{
      width: 800px;
      height: 180px;
      background-color: #ececec;
      border-radius: 6px;
      
		}
    .card-con{
      margin: 30px 26px;
      color:aliceblue; 
    }
    .address-sel{
      width: 300px;
      margin: 26px 0 26px 0;
    }
    .btns3{
      margin: 26px 0 26px 0;
    }
  }
}
</style>